<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Young Forever</title>
  <meta name="keywords" content="life" />
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="./css/main.css" />
</head>

<body>
  <div id="lovexhj" v-clock>
    <!-- 侧栏按钮 -->
    <div class="sidebar">
      <!-- 主题切换 -->
      <div @click="clickChangeTheme" style="display: none">
        <i class="fa fa-moon-o" v-if="basicData.themeSelect == 'white'"></i>
        <i class="fa fa-sun-o" v-else></i>
      </div>
      <!-- <input type="range" min="0" max="24" step="1" v-model:value="hourTest" /> -->
    </div>

    <!-- 首页 -->
    <div class="lovexhj1" v-if="basicData" ref="mainRef">
      <div class="lovexhj1Box">
        <div ref="sun" :class="{'sunlightOrMoon': true, 'sun': true, 'sunOrMoonHide': basicData.themeSelect == 'dark'}"
          :style="{
            '--sunOrMoonBottom': sunBottom,
            '--sunOrMoonLeft': sunLeft,
          }">
        </div>
        <div ref="Moon"
          :class="{'sunlightOrMoon': true, 'moon': true, 'sunOrMoonHide': basicData.themeSelect == 'white'}" :style="{
            '--sunOrMoonBottom': moonBottom,
            '--sunOrMoonLeft': moonLeft,
          }">
        </div>
        <div class="hill1" ref="hill1"></div>
        <div class="hill2" ref="hill2"></div>
        <div class="earth" ref="earth">
          <div class="house" ref="house"></div>
        </div>

      </div>
    </div>
  </div>

  <!-- js 引用 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
  <script>!window.Vue && document.write(unescape('%3Cscript src="./static/vue.min.js"%3E%3C/script%3E'))</script>
  <script src="./js/main.js" type="module"></script>
</body>

</html>